<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sky 外卖 · 管理端</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <!-- 登录分屏页面 -->
    <div id="login-page" class="login-page hidden">
      <div class="login-wrap">
        <div class="login-left"></div>
        <div class="login-right">
          <div class="login-card">
            <div class="brand">
              <img src="https://static-1253419794.file.myqcloud.com/sky-take-out/logo.png" alt="苍穹外卖" onerror="this.style.display='none'" />
              <h1 class="title">苍穹外卖</h1>
              <p class="subtitle">THE SKY TAKE OUT</p>
            </div>
            <form id="login-form" class="login-form">
              <label class="input">
                <span>账号</span>
                <input name="username" placeholder="admin" required />
              </label>
              <label class="input">
                <span>密码</span>
                <input name="password" type="password" placeholder="******" required />
              </label>
              <button type="submit" class="login-btn">登录</button>
              <div id="login-msg" class="login-msg"></div>
              <pre id="login-result" class="result" style="max-height:120px"></pre>
            </form>
          </div>
        </div>
      </div>
    </div>

    <header class="topbar">
      <div class="top-left">
        <img class="logo" src="https://static-1253419794.file.myqcloud.com/sky-take-out/logo.png" alt="logo" onerror="this.style.display='none'">
        <span class="brand-name">苍穹外卖 · 管理端</span>
      </div>
      <div class="top-right">
        <span class="shop-toggle">营业状态设置</span>
        <span id="auth-status">未登录</span>
        <button id="logout-btn" class="logout-btn" style="display: none;">退出登录</button>
      </div>
    </header>

    <div class="layout">
      <aside class="sidebar">
        <button class="nav-item" data-view="workspace">工作台</button>
        <button class="nav-item" data-view="order">订单管理</button>
        <button class="nav-item" data-view="setmeal">套餐管理</button>
        <button class="nav-item" data-view="dish">菜品管理</button>
        <button class="nav-item" data-view="category">分类管理</button>
        <button class="nav-item active" data-view="employee">员工管理</button>
        <button class="nav-item" data-view="upload">上传</button>
      </aside>

      <main>
      <!-- 登录（保留占位，登录页使用顶层分屏） -->
      <section id="view-login" class="view hidden">
        <h2>管理员登录</h2>
        <p>请使用顶部登录页进行登录</p>
        <pre id="login-result" class="result"></pre>
      </section>

      <!-- 工作台 -->
      <section id="view-workspace" class="view hidden">
        <h2>工作台</h2>
        
        <!-- 今日经营数据 -->
        <div class="data-section">
          <h3>今日经营数据</h3>
          <table id="business-data-table" class="table">
            <thead>
              <tr>
                <th>营业额</th>
                <th>有效订单</th>
                <th>订单完成率</th>
                <th>平均客单价</th>
                <th>新增用户</th>
              </tr>
            </thead>
            <tbody id="business-data-tbody">
              <tr>
                <td colspan="5" class="loading">点击刷新按钮获取数据</td>
              </tr>
            </tbody>
          </table>
          <button id="btn-businessData" class="refresh-btn">刷新数据</button>
        </div>

        <!-- 订单总览 -->
        <div class="data-section">
          <h3>订单总览</h3>
          <table id="orders-overview-table" class="table">
            <thead>
              <tr>
                <th>订单号</th>
                <th>状态</th>
                <th>用户</th>
                <th>金额</th>
                <th>下单时间</th>
              </tr>
            </thead>
            <tbody id="orders-overview-tbody">
              <tr>
                <td colspan="5" class="loading">点击刷新按钮获取数据</td>
              </tr>
            </tbody>
          </table>
          <button id="btn-overviewOrders" class="refresh-btn">刷新数据</button>
        </div>

        
        <!-- 运营报表 -->
        <h3>运营报表</h3>
        <form id="report-form" class="inline-form">
          <label>开始日期 <input name="begin" type="date" required></label>
          <label>结束日期 <input name="end" type="date" required></label>
          <button type="submit">查询统计</button>
        </form>
        <div id="report-blocks" class="grid">
          <h3>营业额统计</h3>
          <div id="turnover-chart" class="chart"></div>
          <h3>用户统计</h3>
          <div id="user-chart" class="chart"></div>
          <h3>订单统计</h3>
          <div id="orders-chart" class="chart"></div>
          <h3>销量TOP10</h3>
          <div id="top10-chart" class="chart"></div>
        </div>
        <div class="actions">
          <button id="btn-export">导出运营数据报表</button>
        </div>
      </section>

      <!-- 店铺 -->
      <section id="view-shop" class="view hidden">
        <h2>店铺营业状态</h2>
        <div class="actions">
          <button id="btn-getShopStatus">获取状态</button>
          <button id="btn-openShop">设为营业(1)</button>
          <button id="btn-closeShop">设为打烊(0)</button>
        </div>
        <pre id="shop-result" class="result"></pre>
      </section>

      <!-- 员工管理 -->
      <section id="view-employee" class="view hidden">
        <div class="view-header">
          <h2>员工管理</h2>
          <button id="btn-employee-add" class="primary">+ 新增员工</button>
        </div>
        <form id="employee-search-form" class="inline-form">
          <label>员工姓名 <input name="name" placeholder="请输入员工姓名"></label>
          <label>页码 <input name="page" type="number" value="1" min="1"></label>
          <label>每页 <input name="pageSize" type="number" value="10" min="1"></label>
          <button type="submit">查询</button>
        </form>
        <div id="employee-table" class="table"></div>

        <!-- 新增/编辑弹窗 -->
        <div id="employee-modal" class="modal hidden">
          <div class="modal-content">
            <h3 id="employee-modal-title">新增员工</h3>
            <form id="employee-form" class="form">
              <input type="hidden" name="id" />
              <label>姓名 <input name="name" required></label>
              <label>账号 <input name="username" required></label>
              <label>手机号 <input name="phone" required></label>
              <label>性别
                <select name="sex">
                  <option value="1">男</option>
                  <option value="0">女</option>
                </select>
              </label>
              <label>身份证号 <input name="idNumber"></label>
              <div class="modal-actions">
                <button type="submit" class="primary">保存</button>
                <button type="button" id="employee-modal-cancel" class="secondary">取消</button>
              </div>
            </form>
          </div>
        </div>
      </section>

      <!-- 分类 -->
      <section id="view-category" class="view hidden">
        <h2>分类分页查询</h2>
        <form id="category-form" class="inline-form">
          <label>类型 <input name="type" placeholder="1:菜品,2:套餐"></label>
          <label>页码 <input name="page" type="number" value="1"></label>
          <label>每页 <input name="pageSize" type="number" value="10"></label>
          <button type="submit">查询</button>
        </form>
        <div id="category-table" class="table"></div>
      </section>

      <!-- 菜品 -->
      <section id="view-dish" class="view hidden">
        <h2>菜品分页查询</h2>
        <form id="dish-form" class="inline-form">
          <label>分类ID <input name="categoryId"></label>
          <label>页码 <input name="page" type="number" value="1"></label>
          <label>每页 <input name="pageSize" type="number" value="10"></label>
          <button type="submit">查询</button>
        </form>
        <div id="dish-table" class="table"></div>
      </section>

      <!-- 套餐 -->
      <section id="view-setmeal" class="view hidden">
        <h2>套餐分页查询</h2>
        <form id="setmeal-form" class="inline-form">
          <label>分类ID <input name="categoryId"></label>
          <label>页码 <input name="page" type="number" value="1"></label>
          <label>每页 <input name="pageSize" type="number" value="10"></label>
          <button type="submit">查询</button>
        </form>
        <div class="actions">
          <button id="btn-add-setmeal">新增套餐</button>
        </div>
        <div id="setmeal-table" class="table"></div>
        
        <!-- 新增套餐对话框 -->
        <div id="add-setmeal-modal" class="modal hidden">
          <div class="modal-content">
            <h3>新增套餐</h3>
            <form id="add-setmeal-form">
              <div class="form-group">
                <label>套餐名称 <input name="name" required></label>
              </div>
              <div class="form-group">
                <label>分类 <select name="categoryId" id="add-setmeal-categoryId" required></select></label>
              </div>
              <div class="form-group">
                <label>价格 <input name="price" type="number" step="0.01" required></label>
              </div>
              <div class="form-group">
                <label>状态 
                  <select name="status" required>
                    <option value="1">启用</option>
                    <option value="0">禁用</option>
                  </select>
                </label>
              </div>
              <div class="form-group">
                <label>描述 <textarea name="description" rows="3"></textarea></label>
              </div>
              <div class="form-group">
                <label>图片URL <input name="image" type="url"></label>
              </div>
              <div class="form-group">
                <label>套餐菜品</label>
                <div id="add-setmeal-dishes">
                  <button type="button" id="btn-add-dish-to-setmeal">添加菜品</button>
                </div>
              </div>
              <div class="form-actions">
                <button type="submit">保存</button>
                <button type="button" id="add-setmeal-modal-cancel" class="secondary">取消</button>
              </div>
            </form>
          </div>
        </div>
        
        <!-- 修改套餐对话框 -->
        <div id="modify-setmeal-modal" class="modal hidden">
          <div class="modal-content">
            <h3>修改套餐</h3>
            <form id="modify-setmeal-form">
              <input type="hidden" name="id" id="modify-setmeal-id">
              <div class="form-group">
                <label>套餐名称 <input name="name" id="modify-setmeal-name" required></label>
              </div>
              <div class="form-group">
                <label>分类 <select name="categoryId" id="modify-setmeal-categoryId" required></select></label>
              </div>
              <div class="form-group">
                <label>价格 <input name="price" id="modify-setmeal-price" type="number" step="0.01" required></label>
              </div>
              <div class="form-group">
                <label>状态 
                  <select name="status" id="modify-setmeal-status" required>
                    <option value="1">启用</option>
                    <option value="0">禁用</option>
                  </select>
                </label>
              </div>
              <div class="form-group">
                <label>描述 <textarea name="description" id="modify-setmeal-description" rows="3"></textarea></label>
              </div>
              <div class="form-group">
                <label>图片URL <input name="image" id="modify-setmeal-image" type="url"></label>
              </div>
              <div class="form-group">
                <label>套餐菜品</label>
                <div id="modify-setmeal-dishes">
                  <button type="button" id="btn-modify-add-dish-to-setmeal">添加菜品</button>
                </div>
              </div>
              <div class="form-actions">
                <button type="submit">保存</button>
                <button type="button" id="modify-setmeal-modal-cancel" class="secondary">取消</button>
              </div>
            </form>
          </div>
        </div>
      </section>

      <!-- 订单 -->
      <section id="view-order" class="view hidden">
        <h2>订单搜索</h2>
        <form id="order-form" class="inline-form">
          <label>页码(page) <input name="page" type="number" value="1"></label>
          <label>每页(pageSize) <input name="pageSize" type="number" value="10"></label>
          <button type="submit">查询</button>
        </form>
        <div class="actions">
          <button id="btn-order-stats">订单数量统计</button>
        </div>
        <div id="order-table" class="table"></div>
        <pre id="order-result" class="result"></pre>
      </section>

      <!-- 上传 -->
      <section id="view-upload" class="view hidden">
        <h2>文件上传</h2>
        <form id="upload-form">
          <input id="upload-file" type="file" name="file" required>
          <button type="submit">上传到OSS</button>
        </form>
        <pre id="upload-result" class="result"></pre>
      </section>
      </main>
    </div>

    <script src="./admin.js"></script>
    <!-- 覆盖登录提交逻辑，增强成功判断与错误提示 -->
    <script>
      (function () {
        const form = document.getElementById('login-form');
        if (!form) return;
        form.addEventListener('submit', async function (e) {
          e.preventDefault();
          // 阻止 admin.js 中已注册的监听器继续执行
          e.stopImmediatePropagation();
          const data = Object.fromEntries(new FormData(form).entries());
          const res = await API.send('POST', '/admin/employee/login', data);
          const debugOut = document.getElementById('login-result');
          if (debugOut) debugOut.textContent = JSON.stringify(res, null, 2);
          const msgEl = document.getElementById('login-msg');
          const ok = res && (Number(res.code) === 1 || (res.data && res.data.token));
          if (ok) {
            const token = res.data && res.data.token;
            if (token) localStorage.setItem('sky_admin_token', token);
            updateAuthStatus();
            showMainUI();
            msgEl && (msgEl.textContent = '登录成功，正在进入系统…');
            show('view-employee');
            if (typeof loadEmployees === 'function') {
              try { loadEmployees({ page: 1, pageSize: 10 }); } catch (err) {}
            }
          } else {
            const msg = (res && res.msg) ? ('登录失败：' + res.msg) : '登录失败，请检查账号或网络。';
            msgEl && (msgEl.textContent = msg);
            alert(msg);
          }
        }, { once: true });
      })();
    </script>
    
    <!-- 菜品修改弹窗 -->
    <div id="dish-modify-modal" class="modal" style="display: none;">
      <div class="modal-content">
        <div class="modal-header">
          <h3>修改菜品</h3>
          <span class="close" onclick="closeDishModifyModal()">&times;</span>
        </div>
        <div class="modal-body">
          <form id="dish-modify-form">
            <input type="hidden" id="modify-dish-id" name="id">
            
            <div class="form-group">
              <label for="modify-dish-name">菜品名称:</label>
              <input type="text" id="modify-dish-name" name="name" required>
            </div>
            
            <div class="form-group">
              <label for="modify-dish-category">分类:</label>
              <select id="modify-dish-category" name="categoryId" required>
                <option value="">请选择分类</option>
                <!-- 动态加载分类选项 -->
              </select>
            </div>
            
            <div class="form-group">
              <label for="modify-dish-price">价格:</label>
              <input type="number" id="modify-dish-price" name="price" step="0.01" required>
            </div>
            
            <div class="form-group">
              <label for="modify-dish-image">图片URL:</label>
              <input type="text" id="modify-dish-image" name="image">
            </div>
            
            <div class="form-group">
              <label for="modify-dish-description">描述:</label>
              <textarea id="modify-dish-description" name="description" rows="3"></textarea>
            </div>
            
            <div class="form-group">
              <label for="modify-dish-status">状态:</label>
              <select id="modify-dish-status" name="status">
                <option value="1">启用</option>
                <option value="0">禁用</option>
              </select>
            </div>
            
            <div class="form-group">
              <label>口味配置:</label>
              <div id="modify-dish-flavors" class="flavors-config">
                <!-- 动态生成口味配置 -->
              </div>
              <button type="button" onclick="addFlavorConfig()" class="btn-add-flavor">添加口味</button>
            </div>
            
            <div class="form-actions">
              <button type="button" onclick="closeDishModifyModal()" class="btn-cancel">取消</button>
              <button type="submit" class="btn-submit">保存修改</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    
    <script src="./employee.js"></script>
  </body>
  </html>